<template>
  <div class="page-box">
    <!-- 头部搜索 -->
    <div class="header-box" v-if="pageConfig.showHeader">
      <slot name="header">
        <headerPage :pageConfig="pageConfig" @search="changeSearch">
        </headerPage>

      </slot>
    </div>
    <!-- 表格 -->
     <div class="table-box">
       <v-card shadowType="hover">
        <!-- 表格头部插槽 -->
        <slot name="tableHeader"></slot>
         <tablePage
           :tableData="tableData"
           :pageConfig="pageConfig"
           @changeSelect="changeSelect"
           @changeEdit="changeEdit"
         >
         </tablePage>
        <!-- 分页 -->
        <div class="pagination-box" v-if="showPagination">
          <v-pagination
            :total="total"
            :pageNo="pageNo"
            :pageSize="pageSize"
            @changePage="changePageNo"
          />
        </div>
       </v-card>
     </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, defineProps, defineEmits, defineExpose } from 'vue'
import tablePage  from './table.vue'
import headerPage from './header.vue'
const pageNo = ref(1)
const pageSize = ref(5)
const props = defineProps({
  pageConfig: {
    type: Object,
    default: () => ({})
  },
  tableData: {
    type: Array,
    default: () => ([])
  },
  total: {
    type: Number,
    default: 0
  },
  showPagination: {
    type: Boolean,
    default: true
  }
})
const emits = defineEmits(['changeSearch', 'changeSelect', 'changeEdit', 'changePageNo'])
// 搜索
const changeSearch = (val: any) => {
  // console.log(val, '这是搜索')
  emits('changeSearch', val)
}
// 获取选中数据
const changeSelect = (val: any) => {
  // console.log(val, '这是数据')
  emits('changeSelect', val)
}
// 操作按钮
const changeEdit = (val: any) => {
  // console.log(val, '这是操作')
  emits('changeEdit', val)
}
// 改变分页
const changePageNo = (val: number) => {
  pageNo.value = val
  emits('changePageNo', val)
}
</script>

<style scoped lang="scss">
.page-box{
  
  // background-color: #fff;
  // padding: 20px;
  .header-box{
    margin-bottom: 20px;
  }
  .table-box{
    width: 100%;
    .pagination-box{
      margin-top: 10px;
    }
  }
}
</style>